const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      cleanCss = require('gulp-clean-css'),
      autoprefixer = require('gulp-autoprefixer'),
      sass = require('gulp-sass'),
      del = require('del'),
      connect = require('gulp-connect'),
      { createProxyMiddleware }= require('http-proxy-middleware')

const delDist = () => del('dist')

const paths = {
  html: {
     src:'src/**/*.html',
     dest:'dist'
  },
  css: {
     src:'src/css/**/*.scss',
     dest:'dist/css'
  },
  js: {
     src:'src/js/**/*.js',
     dest:'dist/js'
  },
  libs: {
     src:'src/libs/**',
     dest:'dist/libs'
  },
  images: {
     src:'src/images/**',
     dest:'dist/images'
  },
  ico: {
     src: 'src/favicon.ico',
     dest:'dist'
  }
}

const html = () => {
  return gulp.src(paths.html.src)
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS 
        }))
        .pipe(gulp.dest(paths.html.dest))
        .pipe(connect.reload())
}

const js = () => {
  return gulp.src(paths.js.src)
        .pipe(babel({
          presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(connect.reload())
}

const css = () => {
  return gulp.src(paths.css.src)
        .pipe(sass())
        .pipe(autoprefixer({
          cascade: false
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(paths.css.dest))
        .pipe(connect.reload())
}
const images = () => gulp.src(paths.images.src).pipe(gulp.dest(paths.images.dest))
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))

const server = () => {
   connect.server({
      root: 'dist',
      port: 999,
      livereload: true,
      middleware () {
         return [
            createProxyMiddleware('/api',{
               target: 'https://apiv2.pinduoduo.com',
               changeOrigin: true
            })
         ]
      }
   })
}

const watchs = () => {
   gulp.watch(paths.html.src, html)
   gulp.watch(paths.css.src, css)
   gulp.watch(paths.js.src, js)
}


module.exports.default = gulp.series(delDist, gulp.parallel(css, js, html, images, libs,server, watchs, ico))